<template>
  <el-dialog
    v-model="dialogVisible"
    v-if="load"
    title="选择商品"
    width="1200"
    :close-on-click-modal="false"
    @close="handleClose"
    :z-index="2000"
  >
    <div>
      <div
        style="
          display: flex;
          flex-wrap: wrap;
          align-items: flex-start;
          justify-content: space-between;
          margin-bottom: 8px;
          margin-left: 8px;
        "
      >
        <div class="clearfix flex items-start">
          <el-input
            v-model="form.spu_cn_title"
            placeholder="产品名称"
            class="fl"
            clearable
            style="width: 208px"
          />
          <multi-input
            v-model="form.spu"
            placeholder="SPU"
            class="ml-2 w-50"
          ></multi-input>
          <multi-input
            v-model="form.sku"
            placeholder="SKU"
            class="ml-2 w-50"
          ></multi-input>
          <multi-input
            v-model="form.sai_he_sku"
            placeholder="赛盒SKU"
            class="ml-2 w-50"
          ></multi-input>
        </div>
        <el-button type="primary" @click="queryFun"> 查询 </el-button>
      </div>
    </div>
    <vxe-table
      ref="tableRef"
      height="500"
      style="margin-left: 8px"
      @radio-change="radioChangeEvent"
      @checkbox-change="selectChangeEvent"
      :column-config="{ resizable: true }"
      :row-config="{ isHover: true }"
      :checkbox-config="{ showHeader: false }"
      :data="tableData"
    >
      <vxe-column type="radio" width="60" fixed="left"></vxe-column>
      <vxe-column title="产品图片" width="80">
        <template #default="{ row }">
          <VImage :width="60" :height="60" :src="row.attr_img" />
        </template>
      </vxe-column>
      <vxe-column title="SPU">
        <template #default="{ row }">
          <div>
            <span>{{ row.spu }}</span>
          </div>
        </template>
      </vxe-column>
      <vxe-column title="SKU" width="200">
        <template #default="{ row }">
          <div>
            <span>{{ row.sku }}</span>
            <span class="block">自定义: {{ row.custom_sku }}</span>
            <span class="block">赛盒: {{ row.sai_he_sku }}</span>
          </div>
        </template>
      </vxe-column>
      <!-- <vxe-column title="SKU">
        <template #default="{ row }">
          <div>
            <span>{{ row.sku }}</span>
          </div>
        </template>
      </vxe-column> -->
      <vxe-column title="产品名称" width="300">
        <template #default="{ row }">
          <div>
            <span>{{ row.sku_cn_title }}</span>
          </div>
        </template>
      </vxe-column>
      <vxe-column title="商品状态">
        <template #default="{ row }">
          <div>
            <span>{{ row.spu_status_text }}</span>
          </div>
        </template>
      </vxe-column>
      <vxe-column title="规格">
        <template #default="{ row }">
          <template v-if="row.specification">
            <div v-for="(item, index) in row.specification" :key="index">
              {{ item.name }}
            </div>
          </template>
          <template v-else>--</template>
        </template>
      </vxe-column>
      <vxe-column title="采购价">
        <template #default="{ row }">
          <div>
            <span>{{ row.purchase_price }}</span>
          </div>
        </template>
      </vxe-column>
    </vxe-table>
    <div
      style="
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 10px;
      "
    >
      <div>
        <vxe-pager
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :total="totalResult"
          :page-sizes="[10, 20, 100]"
          @page-change="pageChange"
          :layouts="[
            'PrevJump',
            'PrevPage',
            'Jump',
            'PageCount',
            'NextPage',
            'NextJump',
            'Sizes',
            'Total',
          ]"
        >
        </vxe-pager>
      </div>
      <div>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="serveFun"> 保存 </el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
import { getSKUList } from "../api";
import { ref, reactive, onMounted, toRefs } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import VImage from "@/components/Image/index.vue";

const totalResult = ref(1);
const currentPage = ref(1);
const pageSize = ref(10);
const dialogVisible = ref(false);
let tableData = ref([]);
let propsData = ref([]);

const data = reactive({
  form: {
    spu: "",
    spu_cn_title: "",
    sku: "",
    sai_he_sku: "",
  },
  handleType: null,
  load: false,
});

const { form, handleType, load } = toRefs(data);

const initData = (data = {}) => {
  getSKUList(data).then(({ total, data }) => {
    tableData.value = data;
    totalResult.value = total;
  });
};
const queryFun = () => {
  currentPage.value = 1;
  initData({ ...form.value, pageNum: currentPage.value });
};

const open = async (type) => {
  if (!load.value) {
    load.value = true;
    await 1;
  }
  handleType.value = type;
  dialogVisible.value = true;
  initData();
};
const handleClose = () => {
  form.value = {};
  dialogVisible.value = false;
};
const pageChange = () => {
  initData({ ...form.value, pageNum: currentPage.value, pageSize: pageSize.value });
};

const serveFun = async () => {
  confirmSave();
};

const confirmSave = async () => {
  // let spu_list = null
  // if (handleType.value == 'add') {
  //   spu_list = Array.from(new Set(propsData.value.map(i => i.spu)))
  //     .map(spu => {
  //       const item = propsData.value.find(i => i.spu === spu);
  //       return {
  //         spu: item.spu,
  //         category_id: item.spu_category
  //       };
  //     });
  // } else if (handleType.value == 'edit') {
  //   spu_list = [
  //     {
  //       spu: propsData.value.spu,
  //       category_id: propsData.value.spu_category,
  //     }
  //   ]
  // }
  emits("selected", propsData.value);
  handleClose();
};

const tableRef = ref();

const clearSelectEvent = () => {
  const $table = tableRef.value;
  if ($table) {
    $table.clearCheckboxRow();
  }
};

const radioChangeEvent = ({ $table }) => {
  const records = $table.getRadioRecord();
  propsData.value = JSON.parse(JSON.stringify(records));
};

const selectChangeEvent = ({ $table }) => {
  const records = $table.getCheckboxRecords();
  propsData.value = JSON.parse(JSON.stringify(records));
};

const emits = defineEmits("selected");
defineExpose({ open, clearSelectEvent });
</script>
<style scoped>
:deep(.vxe-pager.is--perfect) {
  border: 0;
}
</style>
